<template>
  <div ref="modelLogRef" class="model-log">
    {{ selectModel }}
    <div style="background-color: #fff;width: 100%;height: 1px;margin: 1rem 0rem;"></div>
    {{ boxArr }}
  </div>
</template>

<script setup>
import { Showroom3DStore } from "@/pinia/Showroom3D";
const s3Store = Showroom3DStore();
const selectModel = computed(() => {
  return s3Store.modelList.filter((item) => { return s3Store.modelId === item.modelId })[0]
})

const boxArr = computed(() => {
  return s3Store.modelList;
});
</script>
<style lang="scss">
.model-log {
  position: absolute;
  width: 40rem;
  height: 30rem;
  left: 10px;
  bottom: 10px;
  color: #fff;
  font-size: 18px;
  background-color: #212121;
  padding: 5px 10px;
  border-radius: 5px;
  z-index: 999;
  cursor: default;
  opacity: 0.8;
  border: #fff 1px solid;
  overflow: auto;

  &::-webkit-scrollbar {
    width: 5px;
    height: 5px;
  }

  &::-webkit-scrollbar-thumb {
    border-radius: 5px;
    background-color: #fff;
  }

  &::-webkit-scrollbar-track {
    border-radius: 5px;
    background-color: #000;
  }
}
</style>